<template>
  <div class="shopBag" v-if="flag">
    <back-nav
      :leftArrow="true"
      :title="'购物车'"
      :rightText="redact"
      :leftText="'返回'"
      @toggle="toggleText"
    ></back-nav>
    <div class="bgImg">
      <div class="mask"></div>
    </div>
    <div class="itemList">
      <div class="item" v-for="(item, index) in newTypeArr" :key="index">
        <shop-list :typeItem="item"></shop-list>
      </div>
    </div>
    <van-submit-bar
      :price="removeToggle=='提交订单'?shopPrice:null"
      :button-text="removeToggle"
      @submit="onSubmit"
      :loading="loadingFlag"
      :button-color="`${removeToggle=='提交订单'?'#2BAB7B':'#EE0A24'}`"
    >
      <van-checkbox v-model="Allflag" checked-color="#2BAB7B" @click="allClick"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <h2 class="noText" v-if="newTypeArr.length==0">购物车空空如也!</h2>
  </div>
</template>

<script>
import backNav from "../components/BackNav.vue";
import shopList from "../components/ShopBagList.vue";
export default {
  name: "Shopbag",
  data() {
    return {
      redact: "编辑",
      flag: true,
      loadingFlag:false,
      typeAllCount: 0,
      newTypeArr: [],
      // 切换提交和删除选择
      removeToggle:"提交订单"
    };
  },
  components: {
    backNav,
    shopList,
  },
  watch: {
    typeArr() {
      this.newTypeArr = this.typeArr;
    },
  },
  computed: {
    shopPrice() {
      return this.$store.state.allPrice;
    },
    Allflag: {
      get: function () {
        return this.$store.state.selectorAll;
      },
      set: function () {
        this.$store.commit("setAllSelector");
      },
    },
    typeArr() {
      return this.$store.state.allArr;
    },
  },
  methods: {
    // // 获取所有商品条目
    getAllCount() {
      this.axios({
        method: "get",
        url: "/shopcartRows",
      })
        .then((res) => {
          if (res.data.code === 8000) {
            this.typeAllCount = res.data.result;
            this.$store.commit("setCount", res.data.result);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询所有的商品接口
    findAllShopCat() {
      this.axios({
        url: "/findAllShopcart",
        method: "get",
      })
        .then((res) => {
          if (res.data.code === 700) {
            this.flag = false;
            this.$toast("对不起,请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
          } else if (res.data.code === 5000) {
            this.flag = true;
            this.getAllCount();
            let typeAllArr = [];
            res.data.result.forEach((item) => {
              typeAllArr.push({
                data: item,
                flag: false,
                all: res.data.result.length,
              });
            });
            this.$store.commit("getFirstType", typeAllArr);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    allClick() {
      this.$store.commit("setPrice");
    },
    // 切换文字
    toggleText(text){
        this.redact=text;
        if(text==="完成"){
          this.removeToggle="删除选择"
        }else{
           this.removeToggle="提交订单"
        }
        // 重置state的状态
        this.$store.commit("reset");
    },
    // 删除数据
    delete(){
      let arr=[];
       this.typeArr.forEach(item=>{
         if(item.flag){
           arr.push(item.data.sid)
         }
       })
        let sids=JSON.stringify(arr)
       this.axios({
         method:'post',
         url:'/deleteShopcart',
         data:{
           sids
         }
       }).then(res=>{
          if(res.data.code==7000){
             this.$store.commit("delectData")
          }
       }).catch(err=>{
          console.log(err);
       })
    },
    // 删除和订单提交
    onSubmit() {
       if(this.removeToggle=='删除选择'){
          this.delete()
       }else{
         let num=0
         this.newTypeArr.forEach(item=>{
            if(!item.flag){
              num++
            }
         })
         if(num==this.newTypeArr.length){
             this.$toast("亲,你还没选择商品呢");
             return
         }
         this.loadingFlag=true
         setTimeout(()=>{
           this.$router.push({name:'CloseAccount'})
           this.loadingFlag=false;
         },2000)
       }
    },
  },
  created() {
    this.findAllShopCat();
  },
  destroyed() {
     this.$store.commit("AllSelectorUpdate");
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/base.less");
.bgImg {
  height: 60px;
  width: 100%;
  background-image: url(../assets/images/bgImg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px -80px;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgb(46, 46, 46);
    opacity: 0.4;
  }
}
.itemList {
  position: absolute;
  width: 100%;
  bottom: 100px;
  top: 106px;
  overflow-y: auto;
  margin-top: 10px;
  .item {
    margin-bottom: 10px;
  }
}
.noText{
   width: 50%;
   text-align: center;
   margin: 200px auto;
}
/deep/ .van-submit-bar {
  bottom: 50px;
}
/deep/ .van-submit-bar__price {
  color: @mainColor;
}
/deep/ .van-checkbox {
    flex: 1;
}
</style>